<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>番茄钟统计 - 极简Todo系统</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      body {
        height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
          sans-serif;
        background-color: #f2f2f7;
      }

      .ios-status-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding: 0 16px;
        font-size: 12px;
        font-weight: 600;
        color: #000;
        background-color: #ffffff;
      }

      .nav-header {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background-color: white;
        border-bottom: 1px solid #f0f0f0;
      }

      .stats-card {
        padding: 16px;
        margin-bottom: 16px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .stats-number {
        font-size: 36px;
        font-weight: 700;
        color: #007aff;
      }

      .stats-label {
        font-size: 14px;
        color: #8e8e93;
      }

      .chart-container {
        position: relative;
        height: 200px;
      }

      .chart-bar {
        position: absolute;
        bottom: 0;
        width: 24px;
        background-color: #007aff;
        border-radius: 4px 4px 0 0;
      }

      .chart-label {
        position: absolute;
        bottom: -24px;
        width: 24px;
        font-size: 12px;
        color: #8e8e93;
        text-align: center;
      }

      .category-stats {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
      }

      .category-color {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 50%;
      }

      .category-name {
        flex: 1;
        font-size: 14px;
      }

      .category-value {
        font-size: 14px;
        font-weight: 600;
      }

      .category-bar {
        height: 8px;
        overflow: hidden;
        background-color: #f2f2f7;
        border-radius: 4px;
      }

      .category-progress {
        height: 100%;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div>9:41</div>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>

    <div class="nav-header">
      <a href="pomodoro.html" class="text-blue-500">
        <i class="fas fa-chevron-left mr-2"></i>
        返回
      </a>
      <h1 class="text-xl font-semibold mx-auto">番茄钟统计</h1>
    </div>

    <div class="p-4">
      <div class="flex space-x-4 mb-4">
        <div class="stats-card flex-1 flex flex-col items-center">
          <div class="stats-number">23</div>
          <div class="stats-label">本周番茄钟</div>
        </div>
        <div class="stats-card flex-1 flex flex-col items-center">
          <div class="stats-number">9.5</div>
          <div class="stats-label">总专注小时</div>
        </div>
      </div>

      <div class="stats-card mb-4">
        <h3 class="font-semibold mb-4">每日番茄钟</h3>
        <div class="chart-container">
          <div class="chart-bar" style="left: 10px; height: 60%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 10px">一</div>

          <div class="chart-bar" style="left: 50px; height: 40%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 50px">二</div>

          <div class="chart-bar" style="left: 90px; height: 80%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 90px">三</div>

          <div class="chart-bar" style="left: 130px; height: 30%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 130px">四</div>

          <div class="chart-bar" style="left: 170px; height: 70%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 170px">五</div>

          <div class="chart-bar" style="left: 210px; height: 20%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 210px">六</div>

          <div class="chart-bar" style="left: 250px; height: 50%; background-color: #007aff"></div>
          <div class="chart-label" style="left: 250px">日</div>
        </div>
      </div>

      <div class="stats-card">
        <h3 class="font-semibold mb-4">分类统计</h3>

        <div class="category-stats">
          <div class="category-color" style="background-color: #ff5722"></div>
          <div class="category-name">工作</div>
          <div class="category-value">12 (52%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 52%; background-color: #ff5722"></div>
        </div>

        <div class="category-stats mt-3">
          <div class="category-color" style="background-color: #9c27b0"></div>
          <div class="category-name">学习</div>
          <div class="category-value">7 (30%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 30%; background-color: #9c27b0"></div>
        </div>

        <div class="category-stats mt-3">
          <div class="category-color" style="background-color: #2196f3"></div>
          <div class="category-name">个人</div>
          <div class="category-value">4 (18%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 18%; background-color: #2196f3"></div>
        </div>
      </div>
    </div>
  </body>
</html>
